/**
 * @this RXFormInputItem: form 的输入控件
 *
 * @flow
 */
import React, { Component } from 'react'
import {
  StyleSheet,
  Text,
  Image,
  Platform,
  ViewPropTypes,
} from 'react-native'

import PropTypes from 'prop-types'

import FormStyle from './config/FormStyle'
import FormInput from './config/FormInput'
import RXFormItem from './RXFormItem'

import FormItemHOC from './core/FormItemHOC'
import HitView from './config/HitView/index'

class RXFormInputItem extends Component {
  constructor(props) {
    super(props)
    this.state = {
      value: this.props.value,
    }
    props.value && props.onChange && props.onChange(props.value)
  }

  static propTypes = {
    ...FormInput.propTypes,

    title: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.number]),
    titleStyle: Text.propTypes.style,
    isMust: PropTypes.bool,
    mustStyle: Text.propTypes.style,
    inputStyle: FormInput.propTypes.style,
    iconStyle: ViewPropTypes.style,
    icon: PropTypes.oneOfType([PropTypes.element, PropTypes.shape({ uri: PropTypes.string }), PropTypes.number]),
    accessory: PropTypes.oneOfType([PropTypes.element, PropTypes.shape({ uri: PropTypes.string }), PropTypes.number, PropTypes.oneOf(['none', 'auto', 'indicator'])]),
    accessoryStyle: Image.propTypes.style,
    topSeparator: PropTypes.oneOfType([PropTypes.element, PropTypes.oneOf(['none', 'full', 'indent'])]),
    bottomSeparator: PropTypes.oneOfType([PropTypes.element, PropTypes.oneOf(['none', 'full', 'indent'])]),
  }

  static defaultProps = {
    ...FormInput.defaultProps,
    formItemType: 'input',
    accessory: 'none',
    placeholder: '请输入',
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    const { value } = this.props
    if (value !== nextProps.value) {
      this.setState({ value: nextProps.value })
    }
  }

  onChangeText = (value) => {
    const { onChangeText } = this.props

    if (value !== this.state.value) {
      onChangeText && onChangeText(value)
      this.setState({ value })
    }
  }

  render() {
    let { style, title, titleStyle, isMust, mustStyle, icon, iconStyle, topSeparator, bottomSeparator,
      inputStyle, valueSize, placeholderTextColor, placeholderFontSize, accessory, accessoryStyle, ...others } = this.props

    style = [styles.container].concat(style)
    inputStyle = [{
      textAlign: 'right',
      marginLeft: 10,
      color: FormStyle.ItemInputColor,
      fontSize: FormStyle.ItemInputFontSize,
    }].concat(inputStyle)

    if (Platform.OS !== 'web') {
      inputStyle = [{
        flex: 1,
      }].concat(inputStyle)
    }

    if (valueSize === undefined) {
      valueSize = FormStyle.ItemInputFontSize
    }

    if (placeholderTextColor === undefined) {
      placeholderTextColor = FormStyle.ItemInputPlaceholderColor
    }

    if (placeholderFontSize === undefined) {
      placeholderFontSize = FormStyle.ItemInputPlaceholderSize
    }
    let accessoryText = accessory
    if (accessory !== 'none') {
      accessoryText = <Text>{accessory}</Text>
    }
    return (
      <RXFormItem style={style}
        icon={icon}
        iconStyle={iconStyle}
        title={title}
        titleStyle={titleStyle}
        isMust={isMust}
        mustStyle={mustStyle}
        accessory={accessoryText}
        accessoryStyle={accessoryStyle}
        topSeparator={topSeparator}
        bottomSeparator={bottomSeparator}
        disabled={true}
        detail={
          <HitView {...others}
            subView={
              <FormInput
                {...others}
                style={inputStyle}
                placeholderTextColor={placeholderTextColor}
                placeholderFontSize={placeholderFontSize}
                valueSize={valueSize}
                value={this.state.value}
                onChangeText={this.onChangeText}
               />
          }/>
        }
      />
    )
  }
}

const styles = StyleSheet.create({
  container: {
    height: 50,
  },
})

export default FormItemHOC(RXFormInputItem)